<template>
  <div class="xpanel-label xlabel-wrapper">
    <table class="xtable">
      <tr v-if="thData instanceof Array">
        <template v-for="thItem in thData">
          <th v-if="isExistOrNotNull(thItem.name)">
            <div><span>{{thItem.name?thItem.name:""}}</span><span class='xlabel-order-icon' type='up'></span></div>
          </th>
          <th v-if="isExistOrNotNull(thItem.status)">
            <div><span>状态</span><span class='xlabel-order-icon' type='up'></span></div>
          </th>
        </template>
      </tr>
      <template v-for="dataItem in data">
        <tr>
          <template v-for="(value,vIndex) in dataItem">
            {{void(valueMoniStatus=setMoniByValue(value,vIndex))}}
            <td><div><span :class="{'label-value':valueMoniStatus.isMoni===true}" :level="valueMoniStatus.level">{{value}}</span></div></td>
            <td v-if="valueMoniStatus.status===true"><div><span class="label-value" :level="valueMoniStatus.level">{{valueMoniStatus.statusText}}</span></div></td>
          </template>
        </tr>
      </template>
    </table>
  </div>
</template>

<script>
export default {
  name: "xTable",
  data(){
    return {
    }
  },
  props: {
    item: {
      type: Object,
      default: () => {
      }
    },
  },
  computed:{
    thData(){
      return this.item.tableOption ? this.item.tableOption.thData ? this.item.tableOption.thData : [] : [];
    },
    data(){
      return this.item.tableOption ? this.item.tableOption.data ? this.item.tableOption.data : [] : [];
    },
    monis(){
      let result = [];
      if(this.thData instanceof Array){
        for(let i in this.thData){
          let thItem = this.thData[i];
          thItem.moni?result.push({
            index:i,
            moni:thItem.moni?thItem.moni:"",
            status:thItem.status?thItem.status:false
          }):result.push({});
        }
      }
      return result;
    },
    setMoniByValue() {
      return function (value, vIndex) {
        let that = this;
        let valueMoniStatus = {
          isMoni:false,
          status:false,
          statusText:"",
          level:""
        };
        let result = true;
        if (that.isMoniLabelValue(value, vIndex)) {
          valueMoniStatus.isMoni = true;
          let moni = that.monis[vIndex];
          let moniItem = that.getMoniItemByValue(parseFloat(value), moni.moni);
          if (moniItem) {
            valueMoniStatus.statusText = moniItem.status ? moniItem.status : "";
            valueMoniStatus.level = moniItem.level ? moniItem.level : "";
          }
          valueMoniStatus.status = moni.status ? moni.status : that.result.status;
          result = true;
        }
        return valueMoniStatus;
      }
    },
  },
  methods:{
    isExistOrNotNull(obj){
      return !!obj;
    },
    isMoniLabelValue(value,vIndex){
      return this.monis[vIndex]&&parseFloat(value)
    },
    getMoniItemByValue(value,moni){
      let result = {};
      if(moni){
        for(let i in moni){
          let item = moni[i];
          let max = 0;
          let min = 0;
          if(item.interval){
            max=item.interval.max?item.interval.max:max;
            min=item.interval.min?item.interval.min:min;
          }
          if(value<=max&&value>=min){
            result=item;
            break;
          }
        }
      }
      return result;
    }
  }
}
</script>

<style lang="css" scoped src="@/components/bigScreen/css/common.css"></style>
<style lang="css" scoped src="@/components/bigScreen/css/screen.main.css"></style>

<style scoped>

</style>
